<template>
<div class="detail">
<div class="detailHeader">
	<div class="banner">
		<!--轮播图-->
		<div class="swiper-container">
		    <div class="swiper-wrapper" id="pages">
		        <div class="swiper-slide"><img src="/static/img/yanxuan/detail01.jpg" alt="" class="detailLunbo" id="pages"/></div>
		        <div class="swiper-slide"><img src="/static/img/yanxuan/detail02.jpg" alt="" class="detailLunbo"></div>
		        <div class="swiper-slide"><img src="/static/img/yanxuan/detail03.jpg" alt="" class="detailLunbo"></div>
		        <div class="swiper-slide"><img src="/static/img/yanxuan/detail04.jpg" alt="" class="detailLunbo"></div>
		        <div class="swiper-slide"><img src="/static/img/yanxuan/detail05.jpg" alt="" class="detailLunbo"></div>
		    </div>
		</div>
		<div class="pageNum">
			<span class="activeIndex">1</span>
			<p class="xie">/</p>
			<span class="totalIndex">5</span>
		</div>
	</div>
	<div class="iconHead">
		<a class="goBack" @click="goproduct"><i class="iconfont icon-fanhui"></i></a>
		<a class="save"><i class="iconfont icon-shoucang1"></i></a>
	</div>
	<div class="detail">
		<p class="title">纳桑古法红糖罐装280g</p>
		<p class="desc">古法熬制朴素纯粹</p>
		<p class="price">
			<span class="red">￥39.00</span>
			<span class="run">运费：包邮</span>
		</p>
	</div>
	<div class="select">
		商品规格
		<i class="iconfont icon-gengduo"></i>
	</div>
</div>

<!--分割线-->
<div class="line"></div>

<!--评论-->
<div class="comment">
	<a class="commentTit">
		评论（24）
		<i class="iconfont icon-gengduo"></i>
	</a>
	<div class="commentCont">
		<p class="userInform">
			<span class="name">小**</span>
			<span class="date">2017-12-29</span>
		</p>
		<p class="pinglun">红糖一直是最爱，但第一次买到包装如此有心的红糖，大小是一次泡水喝的量，非常方便！朋友推荐的微医严选团购，真不错，后面持续关注，如果还有活动，微医记得提...</p>
		<ul class="imgList">
			<li class="listLi"><img class="liPic" src="/static/img/yanxuan/comment.jpg"></li>
			<li class="listLi"><img class="liPic" src="/static/img/yanxuan/comment02.jpg"></li>
		</ul>
	</div>
</div>

<!--分割线-->
<div class="line"></div>

<!--详情-->
<div class="productInf">
	<div class="productTit">
		商品信息
	</div>
	<ul class="descripe">
		<li class="back">
			<span class="main">退换货规则</span>
			<span class="value">不支持7天无理由退换</span>
		</li>
		<li class="back">
			<span class="main">产地</span>
			<span class="value">贵州</span>
		</li>
		<li class="back">
			<span class="main">保质期</span>
			<span class="value">12个月</span>
		</li>
		<li class="back" style="border: none;">
			<span class="main">品牌</span>
			<span class="value">微医严选</span>
		</li>
	</ul>
	<img src="/static/img/yanxuan/main.jpg" class="pinMain">
	<img src="/static/img/yanxuan/main02.jpg" class="pinMain">
</div>

<!--footer-->
<footer class="footer">
	<a href="#" class="bag"><i class="iconfont icon-gouwuche-copy"></i></a>
	<div class="add">
		加入购物车
	</div>
	<div class="buy">
		立即购买
	</div>
</footer>

<!--选择型号-->
<div class="choose">
	<div class="size">
		<div class="no">×</div>
		<div class="kucun">
			<img class="kucunPic" src="/static/img/yanxuan/kucun.png">
			<div class="info">
				<p class="redP">￥49.00</p>
				<p class="remain">库存剩余423件</p>
				<p class="tips">请选择规格属性</p>
			</div>

		</div>
		<div class="sizeWwrap">
				<div class="thisSize">
					<p class="guige">规格</p>
					<span class="on">280g</span>
				</div>
				<div class="count">
					<p class="theC">商品数量</p>
				</div>
		</div>

	</div>
</div>
</div>
</template>

<script>
    export default {
        data() {
            return {}
        },
         methods:{
          goproduct:function () {
            this.$router.push("/YanXuanProduct")
          }
        },
        mouted:function(){
        	window.onload = function() {
      var mySwiper = new Swiper ('.swiper-container', {
        // 轮播图的方向，也可以是vertical方向
        direction:'horizontal',
        //播放速度
        loop: false,
        // 自动播放时间
        autoplay:false,
        // 播放的速度
        speed:2000,
        // 如果需要分页器，即下面的小圆点
        pagination: '.swiper-pagination',
　　　　　　// 这样，即使我们滑动之后， 定时器也不会被清除
　　　　  autoplayDisableOnInteraction : false,
      });
    }
        }

       }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import "../assets/css/GoodsDetail.css";
@import "../assets/css/swiper-3.4.2.min.css";
</style>
